<template>
	<view class="page-body bg-f7">
		<view class="header">
			<view class="text">
				<view class="f32"><text class="iconfont icon-shizhong"></text>待送货</view>
				<view class="f26">送货单号：这里显示送货单号</view>
			</view>
			<view class="content shadow-lg shadow-warp">
				<view class="row f32">
					<text class="icon-ren mr10"></text>
					收货人  18875933336
				</view>
				<view class="row f32">
					<text class="icon-gong mr10"></text>
					共 <text class="text-red plr10">10</text> 件货
				</view>
				<view class="flex f26" style="margin-top: -12upx;">
					<view class="row">
						<text class="icon-dizhi mr10 f32"></text>
						<text>地址：</text>
					</view>
					<text class="flex1" style="padding-top:12upx;">广东省广州市越秀区站西路47号开心赢服装批         发商城6楼</text>
				</view>
			</view>
			
			<view class="contenter">
				<view class="gridList shadow-lg shadow-warp">
			          	<navigator class="gridItem col-4">
						<view class="gridItem col-6" @click="showModel('Since')">
						<text class="iconfont icon-kuaidi1 text-blue"></text>
						<view class="f32">自送</view>
			                </view>
							</navigator>
					<navigator class="gridItem col-4">
						<view class="gridItem col-6" @click="showModel('Express')">
						<text class="iconfont icon-kuaidi text-red"></text>
						<view class="f32">快递</view>
						</view>
					</navigator>
					<navigator class="gridItem col-4">
						<view class="gridItem col-6" @click="showModel('Logistics')">
						<text class="iconfont icon-iconwuliu text-green"></text>
						<view class="f32">物流</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<cu-modal v-model="modalName" id="Since" title="送货单自送" :btn="btn" >
			<view slot="content">
				<view style="text-align: center;">确定此送货单要自送吗?</view>
			</view>
		</cu-modal>
		
		 <cu-modal v-model="modalName" id="Express" title="送货单快递送货" :btn="btnn">
			<view slot="content">
				<view class="cu-form-group">
					<view class="title">快递公司</view>
					<picker class="flex1">
						<input placeholder="选择快递公司"></input>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">快递单号</view>
					<input placeholder="输入快递单号"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">快递费用</view>
					<view class="flex1">
						<radio-group class="radio-group" bindchange="radioChange">
							<radio class="mr20">
								<text>到付</text>
							</radio>
							<radio :checked="true">
								<text>寄付</text>
							</radio>
						</radio-group>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">快递金额</view>
					<input placeholder="如果是到付,这一栏不显示"></input>
					<text class="text-red">元</text>
				</view>
				<view class="cu-form-group">
					<view class="title">快递凭证</view>
					<div class="flex1 ptb20">
						<yl-upload></yl-upload>
					</div>
				</view>
			</view>
		</cu-modal> 
			<cu-modal v-model="modalName" id="Logistics" title="送货单物流送货" :btn="btnnn">
					<view slot="content">
						<view class="cu-form-group">
							<view class="title">物流公司</view>
							<picker class="flex1">
								<input placeholder="选择物流公司"></input>
							</picker>
						</view>
						<view class="cu-form-group">
							<view class="title">物流单号</view>
							<input placeholder="输入物流单号"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">物流费用</view>
							<view class="flex1">
								<radio-group class="radio-group" bindchange="radioChange">
									<radio class="mr20">
										<text>到付</text>
									</radio>
									<radio :checked="true">
										<text>寄付</text>
									</radio>
								</radio-group>
							</view>
						</view>
						<view class="cu-form-group">
							<view class="title">物流金额</view>
							<input placeholder="如果是到付,这一栏不显示"></input>
							<text class="text-red">元</text>
						</view>
						<view class="cu-form-group">
							<view class="title">物流	凭证</view>
							<div class="flex1 ptb20">
								<yl-upload></yl-upload>
							</div>
						</view>
					</view>
				</cu-modal> 
	</view>

	
</template>
<script>
	import cuModal from '@/common/components/cu-modal.vue';
	import ylUpload from '@/common/components/yl-upload.vue';
	export default {
		// name: 'home',
		data() {
			return {
				modalName: null,
				btn:['取消','确认自送'],
				btnn:['取消','以后填写','保存提交'],
				btnnn:['取消','以后填写','保存提交'],	
			}
		},
		components: {
			cuModal,
			ylUpload,
		},
		methods: {
			showModel(n) {
				this.modalName = n
			}
		}
	};
</script>

<style lang="less">
	
</style>
